<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
	div{
		width:60%;
		margin-top:100px;
		margin-left:300px
	}
</style>

<link href="/Ajax_pagination/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="/Ajax_pagination/js/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="/Ajax_pagination/bootstrap/js/bootstrap.min.js"></script>

<script>
	var pageNo = 1;
	var pageSize = 5;
	$(function(){
		changePage(pageNo);
	});
	
	function changePage(num){
		
		$("#tab").html("<tr><td>编号</td><td>名称</td><td>单价</td><td>数量</td></tr><tr><td colspan='4' id='t1'></td></tr>");
		
		var pageNo = num;
		var url = "/Ajax_pagination/ProductServlet";
		$.post(url,{"pageNo":pageNo,"pageSize":pageSize},function(data){
			pageNo = data.pageNo;
			var totalCount = data.totalCount;
			var totalPage = data.totalPage;
			var html = "";
			$(data.content).each(function(){
				html += "<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.count+"</td><td>"+this.price+"</td>";
			});
			$("#tab tr:last").before(html);
			
			var pagination = "";
			pagination += "<nav><ul class='pagination'>";
			
			if(pageNo==1){
				pagination += "<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>";
			}else{
				pagination += "<li><a href='#' aria-label='Previous' onclick='changePage("+(pageNo-1)+")'><span aria-hidden='true'>&laquo;</span></a></li>";
			}
			
			for(var i=1;i<=totalPage;i++){
				if(i==pageNo){
					pagination += "<li class='active'><a href='#' onclick='changePage("+i+")'>"+i+" <span class='sr-only'>(current)</span></a></li>";
				}else{
					pagination += "<li><a href='#' onclick='changePage("+i+")'>"+i+" <span class='sr-only'>(current)</span></a></li>";
				}
			}
			
			if(pageNo==totalPage){
				pagination += "<li class='disabled'><a href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li></ul></nav>";
			}else{
				pagination += "<li><a href='#' aria-label='Next' onclick='changePage("+(pageNo+1)+")'><span aria-hidden='true'>&raquo;</span></a></li></ul></nav>";
			}
		
			$("#t1").append(pagination);
			
		},"json");
	}
</script>

</head>
<body>
<div>
<table id="tab" class="table table-bordered">

<tr>
<td>编号</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
</tr>

<tr>
<td colspan="4" id="t1">
</td>
</tr>

</table>
</div>
</body>
</html>